import axios from 'axios';
import { Options, Vue } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { dataBaseType, tagType } from '@/codelist';
import './form.less';

@Options({})
export class Form extends Vue {
    /**
     * 上下文
     *
     * @type {*}
     * @memberof Form
     */
    @Prop()
    context: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof Form
     */
    @Prop()
    viewparams: any;

    /**
     * 控件布局
     *
     * @type {*}
     * @memberof Form
     */
    wrapperCol: any = { span: 20 };

    /**
     * 标签布局
     *
     * @type {*}
     * @memberof Form
     */
    labelCol: any = { span: 4 };

    /**
     * 加载状态
     *
     * @type {boolean}
     * @memberof Form
     */
    loading: boolean = false;

    /**
     * Vue生命周期，实例创建完成
     *
     * @memberof Form
     */
    created() {
        this.load();
    }

    /**
     * 表单加载
     *
     * @memberof Form
     */
    async load() {
        if (this.context.id) {
            this.loading = true;
            await this.$http.get(`/api/1/database/config/1/detail`, { id: this.context.id })
                .then((response: any) => {
                    if (response && response.status === 200) {
                        const data = response.data;
                        if (data.code === 1 && data.data) {
                            Object.assign(this.formData, data.data);
                        }
                    }
                });
            this.loading = false;
        }
    }

    /**
     * 表单信息
     *
     * @type {any[]}
     * @memberof Form
     */
    formDetails: any[] = [
        {
            prop: 'url',
            label: '地址',
            type: 'text',
            rules: [
                {
                    required: true,
                    message: '地址不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'name',
            label: '名称',
            type: 'text',
            rules: [
                {
                    required: true,
                    message: '名称不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'label',
            label: '标签',
            codelist: tagType,
            type: 'select',
            rules: [
                {
                    required: true,
                    message: '标签不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'type',
            label: '类型',
            type: 'select',
            codelist: dataBaseType,
            rules: [
                {
                    required: true,
                    message: '类型不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'account',
            label: '账户',
            type: 'text',
            rules: [
                {
                    required: true,
                    message: '账户不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'password',
            label: '密码',
            type: 'text',
            rules: [
                {
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur',
                },
            ],
        },
        {
            prop: 'description',
            label: '描述',
            type: 'textarea',
        },
        ,
        {
            prop: 'createtime',
            label: '时间',
            type: 'datetime',
            rules: [
                {
                    required: true,
                    message: '时间不能为空',
                    trigger: 'blur',
                },
            ],
        }
    ];

    /**
     * 表单数据
     *
     * @type {FormData}
     * @memberof Form
     */
    formData: any = {
        id: null,
        url: null,
        name: null,
        label: null,
        type: null,
        account: null,
        description: null,
    };

    /**
     * 绘制函数
     *
     * @return {*}
     * @memberof Form
     */
    render() {
        return (
            <el-form
                v-loading={this.loading}
                class='form'
                ref='form'
                model={this.formData}
                label-col={this.labelCol}
                wrapper-col={this.wrapperCol}
            >
                {this.formDetails.map((item: any) => {
                    return this.renderFormItem(item);
                })}
            </el-form>
        );
    }

    renderFormItem(item: any) {
        switch (item.type) {
            case 'text':
                return this.renderInput(item);
            case 'textarea':
                return this.renderInput(item);
            case 'number':
                return this.renderInput(item);
            case 'select':
                return this.renderSelect(item);
            case 'datetime':
                return this.renderDatetime(item);
            default:
                return this.renderInput(item);
        }
    }

    /**
     * 绘制日期时间
     *
     * @param {*} item
     * @return {*}
     * @memberof Form
     */
    renderDatetime(item: any) {
        return (
            <el-form-item prop={item.prop} label={item.label} rules={item.rules}>
                <el-date-picker v-model={this.formData[item.prop]} type={item.type} placeholder={`请输入${item.label}`} format = {'YYYY-MM-DD HH:mm:ss'} value-format = {'YYYY-MM-DD HH:mm:ss'}>
                </el-date-picker>
            </el-form-item> 
        );
    }

    /**
     * 绘制输入框
     *
     * @param {*} item
     * @return {*}
     * @memberof Form
     */
    renderInput(item: any) {
        return (
            <el-form-item prop={item.prop} label={item.label} rules={item.rules}>
                <el-input v-model={this.formData[item.prop]} placeholder={`请输入${item.label}`} type={item.type} />
            </el-form-item>
        );
    }

    /**
     * 绘制选择器
     *
     * @param {*} item
     * @memberof Form
     */
    renderSelect(item: any) {
        return (
            <el-form-item prop={item.prop} label={item.label} rules={item.rules}>
                <el-select v-model={this.formData[item.prop]} placeholder={item.label}>
                    {item.codelist
                        ? item.codelist.map((listItem: any) => {
                            return (
                                <el-option key={listItem.key} value={listItem.key} label={listItem.value}></el-option>
                            );
                        })
                        : null}
                </el-select>
            </el-form-item>
        );
    }
}
